<template>
  <div class="change-node-container">
    <div :class="{'mobile-header':showMobilePage}" class="change-node-header">
      <div class="top">
        <span class="type-name">{{ nodeData.typeName }}</span>
        <span v-if="businessType === BUSINESS_TYPE.SETTLE" style="color: #999">
          审批单号: <span style="color: #333">{{ nodeData.flowCode }}</span>
        </span>
        <span v-else-if="businessType === BUSINESS_TYPE.COST" style="color: #999">
          成本编号: <span class="action-text" @click="openCostDetailPage">{{ nodeData.flowCode }}</span>
        </span>
        <span v-else-if="showFlowCode" style="color: #999">
          流程编码: <span class="action-text" @click="openDetailPage">{{ nodeData.flowCode }}</span>
        </span>
      </div>
      <div class="flex-center">
        <el-checkbox v-model="selectAll" class="toggle-select-all" @change="handleSelectAll">全选</el-checkbox>
        <div class="action-text" @click="nodeToggleChange">
          <span>{{ toggleOpen ? '收起' : '展开' }}</span>
          <i :class="toggleOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
        </div>
      </div>
    </div>
    <div v-show="toggleOpen" class="node-checkbox-group">
      <el-checkbox-group v-model="selectNode" @change="onNodeSelectChange">
        <template v-for="node in nodeData.nodeList">
          <el-checkbox :key="node.nodeId" :label="node.nodeId" class="node-checkbox">{{ node.nodeName }}</el-checkbox>
        </template>
      </el-checkbox-group>
    </div>
  </div>
</template>

<script>
import { encryption } from '@/utils';
import { BUSINESS_TYPE } from '@/utils/const/process';
import { mapState } from 'vuex';
export default {
  name: 'ProcessChangeNode',
  model: {
    prop: 'checkedNodes',
    event: 'change'
  },
  props: {
    checkedNodes: {
      type: Array,
      default: () => []
    },
    nodeData: {
      type: Object,
      default: () => ({})
    },
    businessType: {
      type: Number,
      default: BUSINESS_TYPE.CONTRACT
    },
    moduleId: {
      type: Number | String,
      default: null
    }
  },
  data() {
    return {
      BUSINESS_TYPE,
      toggleOpen: true,
      selectAll: true // 全选
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectNode: {
      get() {
        return this.checkedNodes;
      },
      set(data) {
        this.$emit('change', data);
      }
    },
    showFlowCode() {
      const types = [BUSINESS_TYPE.CONTRACT, BUSINESS_TYPE.REIMBURSEMENT, BUSINESS_TYPE.LOAN, BUSINESS_TYPE.PAYBACK, BUSINESS_TYPE.APPROVAL, BUSINESS_TYPE.ARREARS_TRANSFER, BUSINESS_TYPE.CUSTOMER_ADJUSTMENT, BUSINESS_TYPE.EXTERNALHARVEST];
      return types.includes(this.businessType);
    }
  },
  watch: {
    nodeData: {
      handler(data) {
        if (data && data.nodeList) {
          this.handleSelectAll(true);
          this.$emit('change', this.selectNode);
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    openDetailPage() {
      if (!this.nodeData.businessId) {
        this.$message.warning('无法获取审批id');
        return;
      }
      if (!this.nodeData.processId) {
        this.$message.warning('无法获取审批流程id');
        return;
      }
      this.jumpPage(this.routeDataMap());
    },
    // 成本详情
    openCostDetailPage() {
      if (!this.nodeData.businessId) {
        this.$message.warning('无法获取审批id');
        return;
      }
      const routeUrl = this.$router.resolve({
        name: 'costDetail',
        params: { id: this.nodeData.businessId }
      });
      window.open(routeUrl.href, '_blank');
    },
    // 对应模块页面所需参数
    routeDataMap(type = this.businessType) {
      return {
        0: {
          name: 'contractDetail',
          params: { id: encryption(this.nodeData.businessId) },
          query: {
            processId: encryption(this.nodeData.processId)
          }
        },
        7: {
          name: 'reimbursementDetail',
          query: {
            reimbursementId: this.nodeData.businessId,
            processId: this.nodeData.processId
          }
        },
        8: {
          name: 'loanDetail',
          query: {
            id: this.nodeData.businessId,
            processId: this.nodeData.processId
          }
        },
        9: {
          name: 'payBackDetail',
          query: {
            id: this.nodeData.businessId,
            processId: this.nodeData.processId
          }
        },
        10: {
          name: 'approvalModuleDetail',
          params: { moduleId: this.moduleId },
          query: { id: this.nodeData.businessId, processId: this.nodeData.processId }
        },
        11: {
          name: 'arrearsTransferDetail',
          query: {
            id: this.nodeData.businessId,
            processId: this.nodeData.processId
          }
        },
        13: {
          name: 'customerAdjustmentDetail',
          query: {
            id: this.nodeData.businessId,
            processId: this.nodeData.processId
          }
        },
        14: {
          name: 'externalHarvestDetail',
          query: {
            id: this.nodeData.businessId,
            processId: this.nodeData.processId
          }
        }
      }[type];
    },
    jumpPage({ name, params, query }) {
      const routeUrl = this.$router.resolve({
        name,
        params,
        query
      });
      window.open(routeUrl.href, '_blank');
    },
    handleSelectAll(status) {
      if (status) {
        const { nodeList } = this.nodeData || [];
        nodeList.forEach(item => {
          this.selectNode.push(item.nodeId);
        });
      } else {
        this.selectNode = [];
      }
    },
    onNodeSelectChange() {
      this.selectAll = this.nodeData.nodeList.length === this.checkedNodes.length;
    },
    nodeToggleChange() {
      this.toggleOpen = !this.toggleOpen;
    }
  }
};
</script>

<style scoped lang="scss">
.change-node-container {
  .change-node-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin: 12px 0 16px 0;
    height: 28px;
    background: #f9f9f9;
    padding: 0 9px;
    .type-name {
     color: #192452;
     font-weight: bold;
     font-size: 14px;
    }
    .action-text {
      color: #406EFF;
      cursor: pointer;
    }
    .toggle-select-all {
      margin-right: 8px;
      padding-right: 8px;
      position: relative;
      &::after {
        content: '';
        width: 1px;
        height: 14px;
        top: 50%;
        margin-top: -7px;
        position: absolute;
        right: 0;
        background-color: #ddd;
      }
    }
  }
  &::v-deep {
    .el-checkbox__label {
      padding-left: 6px;
    }
  }
}
.node-checkbox-group {
  padding: 0 9px;
}
.mobile-header {
  flex-wrap: wrap;
  .top {
    margin-bottom: 5px;
  }
}

.node-checkbox {
  margin-bottom: 16px;
}
</style>
